<template>
	<view class="container">
		<!-- <view class="header">
			<view @click="changeRoute('/pages/login/index')">登录</view>
		</view> -->
		<view class="top-box">
			<view class="fs50 fw6">Hi 你好</view>
			<view>欢迎使用科目三，让你轻松拿证</view>
		</view>
		<view class="nav-box">
			<view class="mui_input">
				<view class="mui_img">
					<image src='http://test.dowell-driver.com/img/login_psw_normal.png' />
					<input cursor-spacing="20" type="tel" class="mui-input-clear-1" v-model="phoneNum" placeholder="请输入注册手机号码"
						maxlength="11" />
				</view>
				<view class="mui_img">
					<image src='http://test.dowell-driver.com/img/login_psw_normal.png' />
					<input cursor-spacing="20" type="number" class="mui-input-clear" v-model="code" maxlength="6" placeholder="请输入验证码" />
					<view class="btn-code" :style="disabletf?'opacity: 0.5':'opacity:1'" @click="getVerifiCode()">{{code_time}}</view>
				</view>
				<view class="mui_img">
					<image src='http://test.dowell-driver.com/img/login_psw_normal.png' />
					<input cursor-spacing="20" type="password" v-model="password" class="mui-input-clear-1" placeholder="输入登录密码(由6-12位数字和字母组成)" maxlength="12" />
				</view>
				<view class="mui_img">
					<image src='http://test.dowell-driver.com/img/login_psw_normal.png' />
					<input cursor-spacing="20" type="password" v-model="password2" class="mui-input-clear-1" placeholder="请再次输入登录密码" maxlength="12" />
				</view>
			</view>
			<view class="agreement-box">
				<radio :checked="isAgreed" value="1" @click="changeRadio()">
					我已阅读并同意
				</radio>
				<text class="text-blue top2"
					@click='publicJump("service_agreement","用户服务协议")'>《用户服务协议》</text>
				<text class="top2">和</text>
				<text class="text-blue top2"
					@click='publicJump("privacy_policy","隐私政策协议")'>《隐私政策协议》</text>
			</view>
			<view class="mui_btn">
				<button type="primary" :disabled="!isAgreed" @click="handleRegister()">注 册</button>
			</view>
		</view>
		<!-- <view class="footer">
			<text>注册即代表同意</text>
			<text class="text-blue"
				@click='publicJump("service_agreement","用户服务协议")'>《用户服务协议》</text>
			<text>和</text>
			<text class="text-blue"
				@click='publicJump("privacy_policy","隐私政策协议")'>《隐私政策协议》</text>
		</view> -->
		
		<!-- <reminder v-show="reminder_show" names="注册成功请返回登录页登录" @confirm="handleConfirm" :buttons="buttons"></reminder> -->
	</view>
</template>

<script>
	// import {
	// 	showTishi,
	// 	phone_ver,
	// 	validatePassword,
	// 	routerBackOne
	// } from 'utils/index.js'
	// import {
	// 	verify,
	// 	register,
	// 	loginpasswd
	// } from '@/common/api/index.js'
	// import reminder from '@/components/public-popup/reminder.vue'
	// import { handleLogin } from '@/common/api/login.js';
	// import { formatLogin } from '../../utils/format'
	// import CryptoJS from 'crypto-js';
	// import { Base64 } from '@/common/js_sdk/js-base64';
	// import md5 from '@/common/js_sdk/js-md5/src/md5.js';

	export default {
		// components: {
		// 	reminder
		// },
		data() {
			return {
				isAgreed: false,
				buttons: {
					confirm: '确定'
				},
				disabletf: false,
				reminder_show: false,
				password: '',
				password2: '',
				code: '',
				code_time: '获取验证码',
				phoneNum: '',
			}
		},
		onLoad() {

		},
		methods: {
			changeRadio() {
				this.isAgreed = !this.isAgreed
			},
			changeRoute(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleConfirm(){
				this.reminder_show = false
				formatLogin()
			},
			// 验证码登录
			handleRegister() {
				if (!phone_ver(this.phoneNum)) {
					showTishi('请填写正确的手机号')
				} else if (this.code.length !== 6) {
					showTishi('请填写正确的验证码')
				} else if (!validatePassword(this.password)) {
					showTishi('输入登录密码(由6-12位数字和字母组成)')
				} else if (this.password2 == '') {
					showTishi('请再次输入登录密码！')
				} else if (this.password != this.password2) {
					showTishi('两次密码不一致，请确认！')
				}else if (!this.isAgreed) {
					showTishi('请选择同意用户协议和隐私政策！')
				}else {
					let newPass = this.code + '' + this.password
					var key_str = md5(this.phoneNum);
					var key = CryptoJS.enc.Utf8.parse(key_str);
					var AESPass = CryptoJS.AES.encrypt(newPass, key, {
						mode: CryptoJS.mode.ECB,
						padding: CryptoJS.pad.Pkcs7
					});
					var pass = AESPass.toString();
					var authData = Base64.encode(this.phoneNum + ':' + pass).replace(/[\r\n]/g, '');
					handleLogin(authData, true);
				}
			},
			// 登录完成自动注册
			resetLoginPwd(dataDic) {
				loginpasswd(dataDic).then(res => {
					if (res.status == 0) {
						// 注册成功，返回登录页登录
						this.reminder_show = true
						// routerBackOne()
						// formatLogin()
					} else {
						showTishi(res.detail);
					}
				})
			},
			// 获取验证码
			getVerifiCode() {
				var _this = this
				if (_this.disabletf) {
					return
				}
				if (!phone_ver(_this.phoneNum)) {
					showTishi('请填写正确的手机号')
				} else {
					verify({
							phone_number: _this.phoneNum
						})
						.then(res => {
							if (res.status == 0) {
								_this.countDown(60)
								showTishi('已发送验证码')
							} else {
								showTishi(res.detail);
							}
						})
				}
			},
			countDown(s) {
				var _this = this
				s--;
				if (s == 0) {
					_this.code_time = '获取验证码';
					_this.disabletf = false
				} else {
					_this.code_time = s + '秒后可重发';
					_this.disabletf = true
					setTimeout(function() {
						_this.countDown(s);
					}, 1000)
				}
			},
			publicJump(url, title) {
				uni.navigateTo({
					url: '/pages/public_jump?url=' + url + '&title=' + title
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.top-box {
		font-size: 30rpx;
		color: #666;
		line-height: 60rpx;
		padding-bottom: 2rem;
	
		.fw6 {
			color: #040404;
			font-weight: bold;
			font-size: 40rpx;
		}
	}
	
	
	
	.header {
		line-height: 100rpx;
		padding: 20rpx 30rpx;
		position: relative;
		top: 100rpx;
		
		view {
			color: #1784d9;
			font-size: 36rpx;
			float: right;
		}
	}
	.nav-box{
		top: 160rpx;
		padding: 1rem;
		position: relative;
	}
	.top-box {
		font-size: 24rpx;
		color: #666;
		line-height: 60rpx;
		padding-bottom: 2rem;
		.fw6 {
			color: #040404;
		}
	}
	
	.btn-code {
		position: absolute;
		color: #0172FF;
		text-align: center;
		border: 0;
		background-color: 0;
		width: 200rpx;
		line-height: 90rpx;
		height: 90rpx;
		right: 0;
		top: 0px;
		font-size: 26rpx;
	}


	.mui_img image {
		float: left;
		width: 40rpx;
		height: 40rpx;
		margin-top: 25rpx;
	}

	.mui_img {
		border-radius: 5px;
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
		background: #f7f7f7;
		padding: 0 8px;
		margin-bottom: 16rpx;
	}

	.mui-input-clear {
		float: left;
		font-size: 28rpx;
		margin-left: 3%;
		background-color: transparent;
		width: 50%;
		vertical-align: middle;
		border: none;
		border-radius: 0px;
		height: 90rpx;
	}

	.mui-input-clear-1 {
		float: left;
		font-size: 28rpx;
		margin-left: 3%;
		background-color: transparent;
		width: 80%;
		vertical-align: middle;
		border: none;
		border-radius: 0px;
		height: 90rpx;
	}

	.mui_btn {
		text-align: center;
		margin-top: 60rpx;
	}

	.mui_btn button {
		background-color: #0172FF;
	}

	.footer {
		position: fixed;
		// bottom: 64rpx;
		color: #c8c8c8;
		font-size: 26rpx;
		width: 100%;
		text-align: center;
		margin-top: 200rpx;
	}
	
	.agreement-box {
		color: #ada9a9;
		font-size: 28rpx;
		margin-top: 30rpx;
		margin-bottom: 10px;
		text-align: center;
		.top2{
			position: relative;
			top: 2px;
		}
	}
	
	.text-blue{
		color: #007AFF;
	}
	 
</style>
